<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1568902_wneoza4i51d.css">
    <title>周边旅游</title>
    <script type="text/javascript" src="../script/zepto.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">
    
</head>
<style>
 
        *{
            margin: 0;
            border: 0;
            padding: 0;
        }  
         a {
           text-decoration: none;
           color:black;
       }
       a:hover{
           color:red;
       }
       .ch  {
        height: 40px;
        display: flex;
        list-style: none;
        text-align: center;
        font-size: 14px;
        background-color: #FC6B32;
        
    }
        .ch select  {
       -webkit-box-orient: horizontal;
        flex-direction: row;
        background-color: #fff;
        margin: 0;
        width: 50%;
        font-size: 16px;
        background-color: #E0E0E0;
    }
        .nav li {
            text-decoration: none;
        }
      .content li {
            padding-bottom: 10px;
            margin: 10px;
            border-bottom: 1px solid #D8D8D8;
        }
      
        .tab-content li {
            margin: 10px 5px;
            padding: 10px;
            font-size: 14px;
            border-bottom: 1px solid #DBDBDB;
        }

        .item, .text {
            display: -webkit-box;
        }

        .img {
            width: 80px;
            height: 80px;
            padding:10px;
            background-color: #f3f3f3;
        }

        img {
            height: 100%;
            width: 100%;
            display: block;
        }

        .text {
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            margin: 0 5px;
            border: 1px solid #8c8c8c;

        }

        .price span {
            color: #FC6B32;
            font-size: 25px;
        }

        .icon {
            background-size: 12px;
            background-position: center center;;
            background-repeat: no-repeat no-repeat;
            display: inline-block;
            height: 12px;
            width: 12px;
        }

        .icon-people {
            background-image: url("image/dock_icon_my_tuniu@2x.png");
        }

        .icon-heart {
            background-image: url("image/heart@2x.png");
        }

        .text-title {
            font-size: 13px;
            line-height: 17px;
            color: black;
            font-family: 楷体;
            font-weight: bold;
        }

        .text-price {
            padding: 2px 0;
        }

        .new-price {
            font-size: 20px;
            color: #ff7c70;
            font-family: Impact, Arail, sans-serif;
            font-weight: bold;
        }

        .text-price del, .icon-heart {
            margin-left: 15px;
        }

        .text-price del, .icon-people + span, .icon-heart + span {
            color: #8c8c8c;
            font-size: 10px;
        }

        nav {
           border-top: 3px solid  #bebebe;
            border-bottom: 1px solid #bebebe;
            box-sizing: border-box;
        }

        .nav {
            display: -webkit-box;

        }

        nav li {
            width: 50%;
            -webkit-box-sizing: border-box;
            text-align: center;
            margin: 10px 0;
        }

        nav li span {
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
        }

        nav li:not(:last-child) {
            border-right: 1px solid #bebebe;
        }

        nav li a {
            background-image: url("image/filter_arrow_down@2x.png");
            background-repeat: no-repeat no-repeat;
            background-position: right;
            background-size: 10px;
            width: 10px;
            height: 10px;
        }
        
</style>
<body>
    <nav class="ch">
        <select onchange="citytype(this.options.selectedIndex)">
            <option value="休闲">休闲</option>
            <option value="旅游" >旅游</option>
        </select>
        <select onchange="playtype(this.options.selectedIndex)">
            <option value="全部类型">全部类型</option>
            <option value="">市区</option>
            <option value="">郊区</option>
        </select>
       
    </nav>
    <ul id="container">
         <li v-for="(good,index) in goodsList">
             <a href="../index.html">  
            <div class="item">
                <div class="img">
                    <img v-bind:src="good.thumbnail.url">
                </div>
                <div class="text">
                    <div class="text-title">{{good.name}}</div>
                    <div class="text-price">
                        <span class="new-price">￥{{good.price}}</span>
                        <del>原价￥{{good.price1}}</del>
                    </div>
                    <div class="text-label">
                        <i class="iconfont icon-my"></i>
                        <span>{{good.people}}人出游</span>
                        <i class="iconfont icon-aixin"></i>
                        <span>{{good.sd}}满意</span>
                    </div>
                </div>
            </div> 
            </a>
        </li> 
    </ul> 
    <script src="../script/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
  <script src="../script/axios.js"></script>
  <script src="../script/SHA1.js"></script>
    <script>
        var now = Date.now();
        var appKey = SHA1("A6022694570982" + "UZ" + "67A344E5-99A7-33F1-6B44-2616F73CD174" + "UZ" + now) + "." + now
        var vm = new Vue({
          el: "#container",
          data: {
            goodsList: []
          },
          created: function () {
            this.getGoodList()
          },
          methods: {
            //获取商品列表
            getGoodList: function () {
              var _this = this;
              axios.get('https://d.apicloud.com/mcm/api/ware', {
                headers: {
                  "X-APICloud-AppId": "A6022694570982",
                  "X-APICloud-AppKey": appKey
                }
              })
                .then(function (response) {
                  _this.goodsList = response.data;
                  console.log(response.data);
                })
                .catch(function (error) {
                  console.log(error);
                });
            }
          },
        })
      </script>
    
</body>
</html>